﻿@page "/datagrid/filter-menu"

@using Syncfusion.Blazor.Grids
@using Syncfusion.Blazor.DropDowns
@using BlazorDemos
@using blazor_griddata
@inherits SampleBaseComponent;

<SampleDescription>
   <p>This sample demonstrates the way of filtering DataGrid columns using menu, checkbox and excel filter UI. In this sample, click the filtering icon from column header to show filter UI for a particular column.</p> 
</SampleDescription>
<ActionDescription>
  <p>The filtering feature enables the user to view the reduced amount of records based on filter criteria. It can be enabled by setting the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.SfGrid-1.html#Syncfusion_Blazor_Grids_SfGrid_1_AllowFiltering'>AllowFiltering</a></code> property as true.</p>
  <p>DataGrid supports the following filter types,</p>
  <ul><li><strong>FilterBar</strong></li>
      <li><strong>Menu</strong></li>
      <li><strong>CheckBox</strong></li>
      <li><strong>Excel</strong></li>
  </ul>
  <p>You can change the filter type by using the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html#Syncfusion_Blazor_Grids_GridFilterSettings_Type'>Type</a></code> property of the <code><a target='_blank' class='code' href='https://help.syncfusion.com/cr/aspnetcore-blazor/Syncfusion.Blazor.Grids.GridFilterSettings.html'>GridFilterSettings</a></code> component.</p>
  <p>More information on the filter configuration can be found in this <a target='_blank' href='https://blazor.syncfusion.com/documentation/grid/filtering'>documentation section</a></p> 
</ActionDescription>

<div class="col-lg-12 control-section">
    <div class="content-wrapper">
        <div class="row">
            <SfGrid DataSource="@GridData" AllowFiltering="true" AllowPaging="true">
                <GridFilterSettings Type="Syncfusion.Blazor.Grids.FilterType.Menu"></GridFilterSettings>
                <GridPageSettings PageCount="5"></GridPageSettings>
                <GridColumns>
                    <GridColumn Field=@nameof(OrdersDetails.OrderID) HeaderText="Order ID" TextAlign="TextAlign.Right"  Width="120"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.CustomerID) HeaderText="Customer ID" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.Freight) HeaderText="Freight" TextAlign="TextAlign.Right"  Width="120" Format="C2"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.ShipCity) HeaderText="Ship City" Width="150"></GridColumn>
                    <GridColumn Field=@nameof(OrdersDetails.ShipCountry) HeaderText="Ship Country" Width="150"></GridColumn>
                </GridColumns>
            </SfGrid>

        </div>
    </div>
</div>


@code{

    public List<OrdersDetails> GridData { get; set; }

    public class FilterType
    {
        public string id { get; set; }

        public string type { get; set; }
    }


    protected override void OnInitialized()
    {
        GridData = OrdersDetails.GetAllRecords();
    }
}
